<template>
  <div :class="blue?'blue':'pink'" style="width:100%;">
    <div :class="blue?'bannerBlue':'bannerPink'"></div>
    <div :class="blue?'columeBlue':'columePink'">
      <div @click="handleRouter('op1')">遥想那些年</div>
      <div @click="handleRouter('op2')">翰墨留声机</div>
      <div @click="handleRouter('op3')">说说那些事</div>
      <div @click="handleRouter('op4')">屈原这个人</div>
    </div>
    <div
      style="text-align: right;
    margin-right: 0.7rem;
    padding-bottom: 0.5rem;
    margin-top: 0.5rem;"
    >
      <van-icon name="plus" size="27" color="gray" />
      <br />
      <van-icon name="arrow-left" size="27" color="gray" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      blue: true
    };
  },
  methods: {
    handleRouter(op) {
      switch (op) {
        case "op1":
          this.$router.push("/mountainGhost/reminisceThoseYears");
          break;
        case "op2":
          this.$router.push("/mountainGhost/hanmo");
          break;
        case "op3":
          this.$router.push("/mountainGhost/talkAboutThat");
          break;
        case "op4":
          this.$router.push("/mountainGhost/quYuan");
          break;
      }
    }
  }
};
</script>
<style scoped>
.blue {
  background: #0044ae;
}
.pink {
  background: #ffe8ff;
}
.bannerBlue {
  background-image: url("./../../assets/mountainBannerBlue.gif");
  background-size: cover;
  width: 100%;
  height: 8rem;
  margin-bottom: 3.5rem;
}
.bannerPink {
  background-image: url("./../../assets/mountainBannerPink.gif");
  background-size: cover;
  width: 100%;
  height: 8rem;
  margin-bottom: 3.5rem;
}
.columeBlue > div {
  margin-top: 0.3rem;
  font-size: 0.5rem;
  text-align: right;
  margin-right: 2.5rem;
color: #ffe8ff;
}
.columePink > div {
  margin-top: 0.3rem;
  font-size: 0.5rem;
  text-align: right;
  margin-right: 2.5rem;
  color: #0044ae;
}
</style>